<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>图书馆大数据 - 数图</title>
    <link rel="stylesheet" type="text/css" href="assets/lib/stroke-7/style.css"/>
    <link rel="stylesheet" type="text/css" href="assets/lib/jquery.nanoscroller/css/nanoscroller.css"/><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="assets/css/style.css" type="text/css"/>
    <link rel="stylesheet" href="assets/css/override.css" type="text/css"/>
           
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <script src="https://cdn.bootcss.com/bluebird/3.5.0/bluebird.core.min.js"></script>
    <style type="text/css">
    
    body.fullpage {
      background-color: #072e4b !important;
	    color: #fff;
    }
    /* 4.1update */
    .am-content .widget {
      background-color: #18629b;
    }
    #newbooks-table li.odd {
      background-color: #64abe2;
    }
    /* 4.1update */

    .full .widget.widget-tile {
 	    padding: 24px 10px;
      background-color: #18629b;
    }

    .am-wrapper .am-content {margin-left: 1px;}
    .full #widget-top-hold {min-height: 240px;}
    .full .holding-pie {padding-bottom: 5px;}
    .full .widget-pie-gender .chart {min-height: 160px;}
    .full. widget-pie-radar .chart{min-height: 170px;}
    .full .gender-pie .chart-info {margin-top: 65px;}
    .full .holding-pie .chart-info {margin-top: 0px;}
    .full .holding-pie .chart-container {margin-top: -33px;}
    #bar-chart2 {height: 160px;}
    #newbooks-table ul, #circulate-latest-table ul {padding-left: 0; overflow: hidden; max-height: 250px;}
    #newbooks-table li, #circulate-latest-table li {height: 40px;list-style-type:none; padding: 8px 0 3px 16px; background-color: #343a3d;}
    #newbooks-table li.odd {background-color: #454c50;}
    #circulate-latest-table li.odd{background-color: #454c50;}
    
    .widget {
      margin-bottom: 2px;
    }
    .widget-pie .chart-info > div {
      padding-top: 3px;
    }

    #bar-chart3 {
      height: 160px;
    }
    #barcirculate{position: relative;}
    .front {
      backface-visibility: hidden;
      transform-style: preserve-3d;
      position: absolute;
      z-index: 1;
      height: 100%;
      width: 100%;
      transition: all 0.5s ease-out;
      transform: rotateX(0deg);
    }
    .trad-mark {
    	font-size: 12px;
    	color: #fff;
    	font-weight: lighter;
    	line-height: 60px;
    }
    .am-top-header .navbar-collapse .am-icons-nav > li.dropdown > a .icon {
    	font-size: 20px;
    }

    .main-content {
    	padding-right: 30px;
    	padding-left: 30px;
    }

	@media (min-width: 767px) {
		.am-wrapper {
		    padding-top: 65px;
		    overflow-x: hidden;
		}
	}
    .widget.widget-small {
    	margin-bottom: 10px;
    }
    </style>
  </head>
  <body class="fullpage">
    <div class="am-wrapper">
      <nav class="navbar navbar-default navbar-fixed-top am-top-header">
        <div class="container-fluid">
          <div class="navbar-header">
            <div class="page-title"><span>联合数据中心</span></div>
            <a href="index.html" class="navbar-brand"></a> 
            <span class="navbar-title title"></span>
          </div>

          <div id="am-navbar-collapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right am-icons-nav">
              <li class="dropdown trad-mark">
              <a href="http://www.xiao-an.com/">广州晓安网络科技有限公司</a>
              </li>
              <li class="dropdown"><a href="http://www.xiao-an.com/" data-toggle="dropdown" role="button" aria-expanded="false" class="dropdown-toggle"><span class="icon s7-share"></span></a></li>
              <li class="dropdown"><a class="home-link" href="#" ><span class="icon s7-home"></span></a></li>
            </ul>
          </div>
        </div>
      </nav>

      <!--<div class="am-left-sidebar">
        <div class="content">
          <div class="am-logo"></div>
          <ul class="sidebar-elements">
            <li class=""><a href="./index.html"><i class="icon s7-monitor"></i><span>总览</span></a>
            </li>
            <li class=""><a href="./circulate.html"><i class="icon s7-graph"></i><span>流通</span></a>
            </li>
            <li class=""><a href="./holding.html"><i class="icon s7-note2"></i><span>馆藏</span></a>
            </li>
            <li class=""><a href="./live.html"><i class="icon s7-note2"></i><span>实时</span></a>
            </li>
          </ul>
        </div>
      </div>-->

      <div class="am-content">
        <div class="main-content">
        <div class="row">
            <div class="col-md-7">
              <div class="block-flat">
                <div class="header">              
                  <h4>实时流通量（取10分钟平均值）</h4>
                </div>
                <div class="content">
                  <div id="chart4" style="height: 200px; padding: 0px; position: relative;"></div>              
                </div>
              </div>
            </div>
            <div class="col-md-5">
              <div class="row">
                <div class="col-md-6">
                    <div class="widget widget-tile">
                      <div class="data-info" id="data-holdings">
                        <div data-toggle="counter" data-end="18" data-suffix="册" class="value">0</div>
                        <div class="desc">总馆藏量</div>
                      </div>
                      <div class="icon"><span class="s7-cloud-download"></span></div>
                    </div>
                </div>
                <div class="col-md-6">
                      <div class="widget widget-tile">
                        <div class="data-info" id="data-circulates">
                          <div data-toggle="counter" data-end="33" data-suffix="册次" class="value">0</div>
                          <div class="desc">总流通量</div>
                        </div>
                        <div class="icon"><span class="s7-loop"></span></div>
                    </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                    <div class="widget widget-tile">
                      <div class="data-info" id="data-readers">
                        <div data-toggle="counter" data-end="156" data-suffix="人" class="value">0</div>
                        <div class="desc">读者总数</div>
                      </div>
                      <div class="icon"><span class="s7-users"></span></div>
                    </div>
                </div>
                <div class="col-md-6">
                      <div class="widget widget-tile">
                        <div class="data-info" id="data-biblios">
                          <div data-toggle="counter" data-decimals="0" data-end="1000" data-suffix="种" class="value">0</div>
                          <div class="desc">总编目数</div>
                        </div>
                        <div class="icon"><span class="s7-note2"></span></div>
                      </div>
                </div>
              </div>
              <div class="row hidden" >
                <div class="col-md-12">
                  <div class="widget widget-tile widget-tile-wide">
                    <div class="tile-info">
                      <div class="icon"><span class="s7-loop"></span></div>
                      <div class="data-info">
                        <div class="title">总流通量</div>
                        <div class="desc">总的借还服务次数</div>
                      </div>
                    </div>
                    <div class="tile-value" id="data-circulates"><span class="value" data-toggle="counter" data-end="28458" data-suffix="人次">0</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>



          <div class="row">

            <div class="col-sm-3 col-md-3">
              <div class="widget widget-fullwidth widget-small">
                <div class="widget-head">
                  <div class="title">新书通报</div>
                </div>
                <div id="newbooks-table">
                </div>
              </div>
            </div>


            <div class="col-sm-3 col-md-3">
              <div class="widget widget-fullwidth widget-small">
                <div class="widget-head">
                  <div class="title">最新借书</div>
                </div>
                <div id="circulate-latest-table">
                  
                </div>
              </div>
            </div>

          <div class="col-sm-6 col-md-6" >
            <div id='barcirculate'>
                <div class="front" id='barchart-circulate'>
                  <div class="widget bar-chart">
                    <div class="widget-head">
                    <span class="title">流通统计 (10天)</span>
                    </div>
                    <div class="chart-container">
                      <div id="bar-chart2"></div>
                      <div class="chart-table hidden"></div>
                    </div>
                </div>
              </div>
            

            <div class="back" id='barchart-circulate1'>
                <div class="widget bar-chart">
                  <div class="widget-head">
                  <span class="title">流通统计 (10天)</span>
                  </div>
                  <div class="chart-container">
                    <div id="bar-chart3"></div>
                    <div class="chart-table hidden"></div>
                  </div>
              </div>
            </div>

          </div>
          </div>




          </div>

          <div class="row">
            <!-- chart pie #1 -->
            <div class="col-md-4">

               <div class="widget widget-pie holding-pie">
                <div class="widget-head"><span class="title">馆藏分布</span></div>
                <div class="row chart-container">
                  <div class="col-md-8 col-sm-8">
                    <div id="widget-top-hold" class="chart" style="padding: 0px; position: relative;">
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="legend">
                    </div>
                  </div>
                </div>
                <div class="row chart-info" id="summary-info">
                  <div class="col-xs-3">
                    <span class="title"></span>
                    <span class="number">180</span>
                  </div>
                </div>
              </div>

            </div>
           
            <!-- chart pie gender -->
            <div class="col-md-4">
              <div class="widget widget-pie widget-pie-stats gender-pie">
                <div class="widget-head"><span class="title">读者比例</span></div>
                <div class="row chart-container">
                  <div class="col-md-8">
                    <div id="widget-top-gender" class="chart"></div>
                  </div>
                  <div class="col-md-4">
                    <div class="legend">
                    </div>
                  </div>
                </div>
                <div class="row chart-info">
                  <div class="col-xs-4" id="spk1" >
                    <span class="title">未知</span><span class="number">0%</span>
                  </div>
                  <div class="col-xs-4" id="spk2">
                    <span class="title">女</span><span class="number">0%</span>
                  </div>
                  <div class="col-xs-4" id="spk3">
                    <span class="title">男</span><span  class="number">0%</span>
                  </div>
                </div>
              </div>
            </div>

             <!-- chart pie #2 -->
            <div class="col-md-4">
              <div class="widget widget-pie widget-pie-radar">
                <div class="widget-head"><span class="title">读者雷达（借阅喜好）</span></div>
                <div class="row chart-container">
                  <div class="col-md-6">
                    <div class="chart">
                      <canvas id="user-radar-chart1"></canvas>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="legend"></div>
                  </div>
                </div>
                <div class="row chart-info">
                  <div class="col-xs-8" id="user-radar-n1"><span class="title">借阅最多分类</span><span class="number">0%</span></div>
                  <div class="col-xs-4" id="user-radar-n2"><span class="title">借阅总数</span><span class="number">0</span></div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>
    <script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="assets/lib/jquery.nanoscroller/javascripts/jquery.nanoscroller.min.js" type="text/javascript"></script>
    <script src="assets/js/main.js" type="text/javascript"></script>
    <script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>

    <script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

    <script src="assets/jquery.flip.min.js"></script>

    <!-- charts lib -->
    <script src="assets/lib/jquery-flot/jquery.flot.js" type="text/javascript"></script>
    <script src="assets/lib/jquery-flot/jquery.flot.pie.js" type="text/javascript"></script>
    <script src="assets/lib/jquery-flot/jquery.flot.resize.js" type="text/javascript"></script>
    <script src="assets/lib/jquery-flot/jquery.flot.time.js" type="text/javascript"></script>
    
    <script src="assets/lib/jquery-flot/plugins/jquery.flot.orderBars.js" type="text/javascript"></script>
    <script src="assets/lib/jquery-flot/plugins/curvedLines.js" type="text/javascript"></script>
    <script src="assets/jquery.newsTicker.js" type="text/javascript"></script>

    <script src="assets/lib/countup/countUp.min.js" type="text/javascript"></script>
    <script src="assets/lib/chartjs/Chart.min.js" type="text/javascript"></script>
    <script src="assets/js/app-dashboard.js" type="text/javascript"></script>

    <script src="assets/unionlib.js" type="text/javascript"></script>
    <script src="assets/live.js" type="text/javascript"></script>
    <script src="assets/holding.js" type="text/javascript"></script>
    <script src="assets/circulate.js" type="text/javascript"></script>
    <script src="assets/hash.js" type="text/javascript"></script>
    <script src="assets/config.js" type="text/javascript"></script>
    
    <script type="text/javascript">

      $(document).ready(function(){
      	//initialize the javascript
      	App.init();
        //App.dashboard();
        App.idashborad(true);
        //dashboard的初始化复制过来，注释掉radar，因为在circuates里面已经初始化过了
        App.loading('stat/circulates4day?size=30', function(res) {
	    	//console.log(res);
	      try {
		    	line_chart1(res);
	      } 
	      catch(e) {};
			  //update_holding_list(res);
		});

		App.loading('stat/holdings', App.fn.widget_pie_holding);
		App.loading('stat/readers', App.fn.widget_top_gender);

		 //调用两次会多画一张图
		 //axios.get('stat/personas').then(App.fn.radar_chart);
	    axios.get('stat/summary').then(App.fn.counter);



        App.live();
        App.holdings();

        App.circulates();

        //axios.get('stat/summary').then(App.fn.counter);
        //App.loading('stat/readers', App.fn.widget_top_gender);

        App.fn.loading_circulate(2, $('#bar-chart3'));
        $('#barcirculate').flip({axis: 'x'});

        setInterval(function() {
          $('#barcirculate').flip('toggle');
        }, 20000);
        
        full();

        //update counter
        setInterval(function() {
          axios.get('stat/summary'). then(function(res) {
            App.fn.counter(res, true);
          });
        }, 15000);


        //refresh page totally
        setTimeout(window.location.reload, 4*60*60*1000);
      });


      function full() {
        var update_book = function () {
          axios.get('/stat/loans4latest').then(function(res){
              //console.log(res);
              var num = 0;
              var all = 0;
              var table = '<ul>';
              res.data.data.data.forEach(function(v) {
                //if (++num>22)  return;
                var classname = num++%2 == 0 ? 'odd' : ''; 
                table += "<li class='" + classname + " success'>" 
                  + showName(v.RDNAME) + '借走了《' +  truncate(v.TITLE, 12) + "》" 
                  + '</li>';
                  
                 // + v.DUETIME +"</td></tr>";
                 //all += v.TOTAL;
              }) ;
              table += "</ul>";
              $("#circulate-latest-table").html(table);

              $("#circulate-latest-table ul").newsTicker({
                  row_height: 40,
                  max_rows: 5,
                  duration: 4000
              });
          });
          setTimeout(update_book, 120*1000);
        }
        update_book();


        var update_newbooks = function() {
          axios.get('stat/holdings4new?size=50').then(function(res){
          	console.log(res)
            if (res && res.data) {
              var table = '<ul>';
              var num = 0;
              res.data.data.data.list.forEach(function(item){
                if (item.Biblio) {
                  var classname = num++%2 == 0 ? 'odd' : ''; 
                  table +=  "<li class='" + classname + "'>"
                  + "<img class='cover' height='30px' max-width='30px' src='" + getCover(item.Biblio.ISBN) +  "' />" 
                  +"《" + truncate(item.Biblio.TITLE, 12) + "》 " + truncate(item.Biblio.AUTHOR, 7)
                  + "</li>";
                      //+ "<td>" + item.Biblio.PUBLISHER + "</td>"
                } 
              });
              table += "</ul>"
              $("#newbooks-table").html(table);

              $("#newbooks-table ul").newsTicker({
                  row_height: 40,
                  max_rows: 5,
                  duration: 6000
              });
              //$("#newbooks-table ul").vTicker('init', {'showItems': 4});
              //$("#newbooks-table tbody").html(table);
            }
          });
        }
        update_newbooks();
      }


    </script>
  </body>
</html>
